<template>
  <div class="table1">
    <div class="btn-wrap">
      <a-button type="primary" style="margin-right: 15px;" @click="onEdit">编辑</a-button>
      <a-button type="info" @click="download">导出</a-button>
    </div>
    <a-modal title="编辑" width="1000px" :visible="addFormVisible" @ok="onAddSubmit" @cancel="onAddFormCancel">
      <a-table :columns="columns" :data-source="form.todoList" :pagination="false">
        <template slot-scope="text, record, index" slot="finished">
          <a-checkbox v-model="record.finished" @change="record.unfinished = !record.finished"/>
        </template>
        <template slot-scope="text, record, index" slot="unfinished">
          <a-checkbox v-model="record.unfinished" @change="record.finished = !record.unfinished"/>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
  import {
    detail,
    update
  } from '@/api/sjsk/activity/group/detail/end/table2'
  import downloadXlsl from '../../downloadXlsx.js'
  export default {
    data() {
      return {
        addFormVisible: false,
        form: {
          activityId: '',
          todoList: []
        },
        columns: [{
            title: '',
            
            dataIndex: 'itemName',
            align: 'left'
          },
          {
            title: '已完成',
            
            align: 'center',
            scopedSlots: {
              customRender: 'finished'
            }
          },
          {
            title: '未完成',
            
            align: 'center',
            scopedSlots: {
              customRender: 'unfinished'
            }
          },
        ]
      }
    },
    created() {
      this.form.activityId = this.$route.query.id
    },
    methods: {
      download() {
        downloadXlsl(this.$route.query.id, 9)
      },
      onEdit() {
        this.getDetail()
      },
      getDetail() {
        detail({
          activityId: this.$route.query.id
        }).then(res => {
          this.form.todoList = res.result.map(item => {
            item.finished = item.finished == 1 ? true : false
            item.unfinished = item.finished == 1 ? false : true
            return item
          })
          this.addFormVisible = true
        })
      },
      onAddSubmit() {
        const form = JSON.parse(JSON.stringify(this.form))
        form.finished = form.finished ? 1 : 2
        update(form).then(res => {
          this.$message.success('编辑成功！')
          this.addFormVisible = false
        }).catch(err => {
          this.$message.error(err.message)
        })
      },
      onAddFormCancel() {
        this.addFormVisible = false
      },
      
    }
  }
</script>

<style lang="less" scoped>
  .table1 {
    box-sizing: border-box;
    padding: 20px 30px;

    .btn-wrap {
      margin-bottom: 20px;
    }
  }
</style>
